<template>
  <template v-for="(item) in search" :key="item.name">
    <template v-if="item.type === 'input'">
      <el-form-item :label="item.label" class="form-item-wrap" :style="{'margin': '0 16px 0 0','width': item.width}">
        <el-input v-model="item.value" :size="item.size" :placeholder="item.placeholder" :clearable="item.clearable"/>
      </el-form-item>
    </template>
    <template v-if="item.type === 'date-range'">
      <el-form-item :label="item.label" :style="{'margin': '0 16px 0 0','padding': 0,'width': item.width}">
        <el-date-picker :type="item.subType" :format="item.format" v-model="item.value"
                        :value-format="item.valFormat" :placeholder="item.placeholder"
                        :clearable="item.clearable" range-separator="至" :size="item.size"
                        :start-placeholder="item.placeholders[0]" :end-placeholder="item.placeholders[1]"/>
      </el-form-item>
    </template>
    <template v-if="item.type === 'select'">
      <el-form-item :label="item.label" :style="{'margin': '0 16px 0 0','padding': 0,'width': item.width}">
        <el-select v-model="item.value" :multiple="item.multiple" :clearable="item.clearable" :placeholder="item.placeholder">
          <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value" />
        </el-select>
      </el-form-item>
    </template>
    <template v-if="item.type === 'tree-select'">
      <el-form-item :label="item.label" :style="{'margin': '0 16px 0 0','padding': 0,'width': item.width}">
        <el-tree-select v-model="item.value" :data="item.data" :render-after-expand="false" 
                    :placeholder="item.placeholder" :props="item.props" :clearable="item.clearable"/>
      </el-form-item>
    </template>
  </template>
</template>

<script setup lang="ts">

defineProps<{
  search: any
}>()

</script>

<style scoped>
.form-item-wrap {
  color: #000;
  margin: 0 8px 0 0;
}
</style>
